<template>
  <div class="home">
    <div class="content">
      <!-- 表单区域 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <img src="@/assets/images/Login/logo1.jpg" />
        <div class="content_title">重置密码</div>
        <div class="content_select">
          <div class="input">
            <el-form-item prop="password">
              <el-input v-model="ruleForm.password" type="password" placeholder="请设置密码"></el-input>
            </el-form-item>
          </div>
          <div class="confirmPassword">
            <el-form-item prop="confirmPassword">
              <el-input v-model="ruleForm.confirmPassword" type="password" placeholder="请再次输入密码"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item class="btn">
          <el-button @click="confirm" :loading="isActive" @keyup.enter.native="confirm">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 底部区域 -->
    <Footer class="footer"></Footer>
  </div>
</template>

<script>
import Footer from '@/components/content/LoginFooter/LoginFooter'

import { getUserId, updateUserInfo } from '@/components/network/Rest/rest.js'
import { getUserInfo } from '@/components/network/Login/login.js'
export default {
  components: {
    Footer
  },
  data() {
    const validatePass1 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!(value.length >= 6 && value.length <= 12)) {
        callback(new Error('长度在 6 到 12 个字符'))
      } else {
        if (this.ruleForm.confirmPassword !== '') {
          this.$refs.ruleForm.validateField('confirmPassword')
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (!(value.length >= 6 && value.length <= 12)) {
        callback(new Error('长度在 6 到 12 个字符'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        password: '',
        confirmPassword: ''
      },
      rules: {
        password: [{ validator: validatePass1, trigger: 'blur' }],
        confirmPassword: [{ validator: validatePass2, trigger: 'blur' }]
      },
      // 存储id
      userid: '',
      userlist: [],
      isActive: false
    }
  },
  created() {
    this.keyupSubmit()
    this.getUserIds()
    this.getUserInfos()
  },
  methods: {
    // 点击回车触发按钮
    keyupSubmit() {
      document.onkeydown = e => {
        const _key = window.event.keyCode
        if (_key === 13) {
          this.confirm()
        }
      }
    },
    async getUserIds() {
      const res = await getUserId()
      this.userid = res.index
    },
    async getUserInfos() {
      const res = await getUserInfo()
      this.userlist = res
    },
    async confirm() {
      if (!(this.ruleForm.password && this.ruleForm.password)) {
        this.$message.warning('请输入密码！')
      } else {
        if (
          this.ruleForm.password !== this.ruleForm.confirmPassword ||
          !(
            this.ruleForm.password.length >= 6 &&
            this.ruleForm.confirmPassword.length <= 12
          )
        ) {
          return
        }
        this.isActive = true
        await updateUserInfo(this.userid, {
          region: this.userlist[this.userid - 1].region,
          phone: this.userlist[this.userid - 1].phone,
          code: this.userlist[this.userid - 1].code,
          select: this.userlist[this.userid - 1].select,
          username: this.userlist[this.userid - 1].username,
          password: this.ruleForm.password
        })
        setTimeout(() => {
          this.isActive = false
          this.$message.success('设置成功！')
          this.$router.push('/login')
        }, 1000)
      }
    }
  }
}
</script>
<style scoped>
.home {
  height: 782px;
  background-color: #f7f7f7;
  padding-top: 155px;
}
.home .footer {
  margin-top: 220px;
}
.btn {
  margin-top: 80px;
}
.confirmPassword {
  margin-top: 50px;
}
.input .el-select {
  background-color: #fff;
  width: 70px;
}
.input .el-input {
  width: 340px;
}
.confirmPassword .el-input {
  width: 340px;
}
.confirmPassword .el-button {
  height: 50px;
  margin-left: 10px;
}
.content {
  background-color: #fff;
  text-align: center;
  margin: 0 auto;
  height: 60%;
  width: 45%;
}
.content .el-form {
  width: 345px;
  margin: 0 auto;
}
.content .content_title {
  margin: 30px 0;
  font-size: 30px;
}
.content .content_input {
  margin-top: 20px;
}
.btn .el-button {
  background: #ff6700;
  color: #fff;
  width: 340px;
}
</style>
